<template>
  <div class="my-card">
    <div class="title">
      <!-- 把内部的msg暴露出去名字叫xx -->
      <slot :xx="msg" oo="16" name="title">默认值</slot>
    </div>
    <hr />
    <div class="body">
       我是内容
       <slot :msg="msg">我是默认插槽</slot>
    </div>
  </div>
</template>

<script>
export default {

  data () {
    return {
      msg: '你好'
    }
  }
}
</script>

<style>
.my-card {
  margin-bottom: 50px;
  box-shadow: 0 0 5px #ddd;
  width: 450px;
}

.title {
  padding: 10px;
  min-height: 60px;
}
.body {
  padding: 10px;
  min-height: 350px;
}
</style>
